<template>
	<ul class="icons">
		<li v-for="item in imgURL" :key="item.id">
			<router-link to="/">
				<img :src="item.imgURL" />
				<p>{{item.txt}}</p>
			</router-link>
		</li>
	</ul>
</template>

<script>
	// public目录下的所有文件都是直接读取
	export default{
		name: 'Mid',
		data(){
			return{
				imgURL:[
					{id:1,imgURL:'iconimg/icon01.png',txt:'国内游'},
					{id:2,imgURL:'iconimg/icon02.png',txt:'住宿'},
					{id:3,imgURL:'iconimg/icon03.png',txt:'境外游'},
					{id:4,imgURL:'iconimg/icon04.png',txt:'海盗度假'},
					{id:5,imgURL:'iconimg/icon05.png',txt:'境外游'},
					{id:6,imgURL:'iconimg/icon06.png',txt:'出行方式'},
					{id:7,imgURL:'iconimg/icon07.png',txt:'周边游'},
					{id:8,imgURL:'iconimg/icon08.png',txt:'户外游'},
					
				],
							
			}
		}
	}
</script>

<style>
	.icons{
		border-bottom: 0.03rem solid #d3d3d3;
		overflow: hidden;
		padding: 0.6rem 0 0;
	}
	a{
		text-decoration: none;
	}
	
	.icons li{
		float: left;
		width: 25%;
		text-align: center;
	}
	.icons li img{
		width: 1rem;
		height: 1rem;
	}
	
	.icons li p{
		color: #000000;
		padding-top: 0.15rem;
		padding-bottom: 0.5rem;
	}
</style>
